<template>
	<div class="m20">
		<div class="flex ">
			<img class="imgbox br10" src="@/assets/img/rbort.jpg" alt="">
			<div class="pl30">
				<p class="pt20 pb20 underline--magical">Vue 3与Vue 2相比有几个重要的区别，以下是其中的一些：</p>
				<div class="pt10 underline--magical title-box">
					1. 性能改进：Vue 3在性能方面进行了许多改进。Vue 3使用了更高效的虚拟DOM算法，提供了更快的渲染速度和更小的包大小。它还引入了Tree-shaking支持，可以更好地优化构建后的包体积。
				</div>
				<div class="pt10 underline--magical title-box">
					2. Composition API：Vue 3引入了Composition API，这是一个全新的组合式API，用于编写组件逻辑。与Vue 2中的Options API相比，Composition
					API提供了更灵活、可组合和可重用的代码组织方式，使得在大型应用中编写和维护组件更加容易。
				</div>
				<div class="pt10 underline--magical title-box">
					3. 更好的响应式系统：Vue 3对响应式系统进行了改进。Vue 3使用了Proxy代理对象而不是Vue 2中的Object.defineProperty，这使得响应式系统更加强大和灵活。Vue
					3的响应式系统支持嵌套属性的监听、动态添加属性和删除属性，以及更好地支持Typescript类型推导。
				</div>
				<div class="pt10 underline--magical title-box">
					4. Teleport组件：Vue
					3引入了Teleport组件，这是一个强大的组件，用于在DOM树中的任意位置渲染组件内容。Teleport组件可以帮助您更好地管理弹出框、模态框等需要在DOM中移动的组件。
				</div>
				<div class="pt10 underline--magical title-box">
					5. Fragments和新的内置组件：Vue 3支持使用Fragments（片段）来组合多个组件根元素，而不需要额外的包装元素。此外，Vue
					3还引入了一些新的内置组件，如Suspense（异步组件加载占位符）和Keep Alive（保持组件状态），提供了更好的开发体验和性能优化。
				</div>
			</div>
		</div>
		<div class="pt30 fs25">
			下面我们来定义一个的动态数据试试
		</div>
		<div class="flex">
			<div class="flex-1">
				<div class="fs22">vue2</div>
				<div style="white-space: pre;">
					<pre>
						<code ref="codeBlock" :class="[language, 'code-block']">
						  {{ code }}
						</code>
					</pre>
				</div>
			</div>
			<div class="p30"></div>
			<div class="flex-1">
				<div class="fs22">vue3</div>
				<div style="white-space: pre;">
					<pre>
						<code ref="codeBlock" :class="[language, 'code-block']">
						  {{ code1 }}
						</code>
					</pre>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import hljs from 'highlight.js/lib/core';
	import javascript from 'highlight.js/lib/languages/javascript';

	// 引入所需的语言和样式
	hljs.registerLanguage('javascript', javascript);
	import 'highlight.js/styles/default.css';

	const codeBlock = ref(null);
	const code = ref(`
		export default {
		  data() {
			return {
			  message: 'Hello, Vue 2!'
			  obj:{
				  a:1,
				  arr:[1,2,3]
			  }
			};
		  }
		};

	`);
	const code1 = ref(`
		import { ref ,reactive } from 'vue';
		
		export default {
		  setup() {
			const message = ref('Hello, Vue 3!');
			const obj = reactive({
				a:1,
				arr:[1,2,3]
			})
			return {
			  message,obj
			};
		  }
		};
	`);
	const language = 'javascript';

	onMounted(() => {
		hljs.highlightBlock(codeBlock.value);
	});
</script>

<style scoped lang="scss">
	/* webkit, opera, IE9 （谷歌浏览器）*/
	::selection {
		background: rgba($color: #ff55ff, $alpha: 0.3);
		text-decoration: underline;

		color: #005500;
	}

	/* mozilla firefox（火狐浏览器） */
	::-moz-selection {
		background: rgba($color: #39ecff, $alpha: 0.5);
		color: #fff;
	}

	.code-block {
		display: block;
		padding: 1em;
		background-color: black;
		color: #00FFD1;
		/* 设置代码颜色为蓝绿色，可以根据需要调整颜色值 */
		text-align: left;
		font-size: 18px;
	}

	.imgbox {
		display: block;
		width: 50px;
		height: 50px;
	}

	.underline--magical {
		background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
		background-repeat: no-repeat;
		background-size: 100% 0px;
		background-position: 0 100%;
		transition: background-size 0.25s ease-in;

		&:hover {
			background-size: 100% 88%;
		}
	}

	.title-box::first-letter {
		font-size: 1.5em;
		/* 调整首字母的字体大小 */
		font-weight: bold;
		/* 可选：设置首字母的字体加粗 */
	}
</style>